<template>
    <div class="app-container">

        <div v-loading="buttonLoading" class="card-wrap flex-column justify-end card-padding">

            <el-form ref="form" :rules="rules" :model="form" label-width="90px"
                     label-position="left">
                <el-row :gutter="5">
                    <el-col :span="24">
                        <el-tabs v-model="activeName">
                            <el-col :span="8">

                                <el-form-item label="客户名称:" prop="customerName"
                                              :rules="'edit' == type||'add' == type ? {
                                         required: true,
                                         message: '请选择客户名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.customerId, callback)
                                       }:{}">
                                    <el-select @change="memberSel" v-if="'edit' == type||'add' == type" v-model="form.customerId" filterable
                                               clearable style="width: 100%">
                                        <template v-for="dict in shareMemberList">
                                            <el-option :label="dict.customerName" :value="dict.customerId"
                                                       :key="dict.customerId"></el-option>
                                        </template>
                                    </el-select>
                                    <span v-else>{{ form.customerName|filterNull }}</span>
                                </el-form-item>

                            </el-col>
                            <el-tab-pane label="企业" name="first">

                                <el-table border style="margin-bottom: 20px"
                                          :data="dataList0">
                                    <el-table-column
                                        type="index" align="center"
                                        label="序号"
                                        width="80">
                                    </el-table-column>
                                    <el-table-column
                                        align="center"
                                        label="类型"
                                        min-width="80">
                                        <template v-slot="{row}">
                                            企业
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeName" align="center"
                                        label="买受人名称"
                                        min-width="200">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeName" placeholder="请输入买受人名称"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeeName"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入买受人名称',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeName, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="50"
                                                          v-model="row.vendeeName" clearable
                                                          placeholder="请输入买受人名称"></el-input>
                                                <span v-else>{{ row.vendeeName|filterNull }}</span>
                                            </el-form-item>

                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeCode" align="center"
                                        label="统一社会信用代码"
                                        min-width="210">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeCode"-->
                                            <!--                                                      placeholder="请输入统一社会信用代码"></el-input>-->

                                            <el-form-item label-width="0" prop="vendeeCode"
                                                          :rules="'edit' == type||'add' == type ? [{
                                                             required: true,
                                                             pattern:/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
                                                             message: '请输入统一社会信用代码',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeCode, callback)
                                                           },{
                                                                pattern:/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
                                                                message:'请输入18位数字或大写字母',
                                                                trigger: 'change'
                                                            }]:{}">
                                                <el-input v-if="'edit' == type||'add' == type"
                                                          @input="value=>{row.vendeeCode=value.replace(/[^\w_]/g, '');$forceUpdate()}"
                                                          v-model="row.vendeeCode" clearable maxlength="18"
                                                          placeholder="请输入统一社会信用代码"></el-input>
                                                <span v-else>{{ row.vendeeCode|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeResponsibleName" align="center"
                                        label="法定代表人/负责人"
                                        min-width="220">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeResponsibleName"-->
                                            <!--                                                      placeholder="请输入法定代表人/负责人"></el-input>-->

                                            <el-form-item label-width="0" prop="vendeeResponsibleName"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入法定代表人/负责人',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeResponsibleName, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="50"
                                                          v-model="row.vendeeResponsibleName" clearable
                                                          placeholder="请输入法定代表人/负责人"></el-input>
                                                <span v-else>{{ row.vendeeResponsibleName|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeAddress" align="center"
                                        label="通讯地址"
                                        min-width="210">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeAddress"-->
                                            <!--                                                      placeholder="请输入通讯地址"></el-input>-->

                                            <el-form-item label-width="0" prop="vendeeAddress"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入通讯地址',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeAddress, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="50"
                                                          v-model="row.vendeeAddress" clearable
                                                          placeholder="请输入通讯地址"></el-input>
                                                <span v-else>{{ row.vendeeAddress|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeePerson" align="center"
                                        label="联系人"
                                        min-width="200">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeePerson" placeholder="请输入联系人"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeePerson"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入联系人',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeePerson, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="50"
                                                          v-model="row.vendeePerson" clearable
                                                          placeholder="请输入联系人"></el-input>
                                                <span v-else>{{ row.vendeePerson|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeePhone" align="center"
                                        label="联系电话"
                                        min-width="180">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeePhone" placeholder="请输入联系电话"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeePhone"
                                                          :rules="'edit' == type||'add' == type ? [{
                                                             required: true,
                                                             message: '请输入联系电话',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeePhone, callback)
                                                            }, { pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '手机号码格式不正确', trigger: 'blur' }
                                                            ]:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="12"
                                                          @input="value=>row.vendeePhone=value.replace(/[^\d]/g,'')"
                                                          v-model="row.vendeePhone" clearable
                                                          placeholder="请输入联系电话"></el-input>
                                                <span v-else>{{ row.vendeePhone|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeMail" align="center"
                                        label="电子邮箱"
                                        min-width="180">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeMail" placeholder="请输入电子邮箱"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeeMail"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入电子邮箱',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeMail, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="30"
                                                          v-model="row.vendeeMail" clearable
                                                          placeholder="请输入电子邮箱"></el-input>
                                                <span v-else>{{ row.vendeeMail|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeFax" align="center"
                                        label="传真"
                                        min-width="150">
                                        <template v-slot="{row}">
                                            <el-input maxlength="30" @input="value=>row.vendeeFax=value.replace(/[^\w-]/g, '')" v-if="'edit' == type||'add' == type" v-model="row.vendeeFax" placeholder="请输入传真"></el-input>
                                            <span v-else>{{ row.vendeeFax|filterNull }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="操作" min-width="130"
                                                     align="center" fixed="right"
                                                     class-name="small-padding fixed-width">
                                        <template slot-scope="scope">
                                            <e-button size="mini" type="text" v-if="'edit' == type||'add' == type"
                                                      @click="handleDelete0(scope.row, scope.$index)">删除
                                            </e-button>
                                            <e-button size="mini" type="text"
                                                      @click="handleUpload0(scope.row, scope.$index)">{{ 'edit' == type||'add' == type?'上传附件':'查看附件' }}
                                            </e-button>
                                        </template>
                                    </el-table-column>
                                    <template v-if="'edit' == type||'add' == type" v-slot:append>
                                        <div class="flex-xy-center" style="height: 30px">
                                            <el-button type="text" icon="el-icon-plus" @click="add0">添加</el-button>
                                        </div>
                                    </template>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="个人" name="second">

                                <el-table border style="margin-bottom: 20px"
                                          :data="dataList1">
                                    <el-table-column
                                        type="index" align="center"
                                        label="序号"
                                        width="80">
                                    </el-table-column>
                                    <el-table-column
                                        align="center"
                                        label="类型"
                                        min-width="80">
                                        <template v-slot="{row}">
                                            个人
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="vendeeName" align="center"
                                        label="买受人名称"
                                        min-width="150">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeName" placeholder="请输入买受人名称"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeeName"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入买受人名称',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeName, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type"
                                                          v-model="row.vendeeName" clearable maxlength="50"
                                                          placeholder="请输入买受人名称"></el-input>
                                                <span v-else>{{ row.vendeeName|filterNull }}</span>
                                            </el-form-item>

                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="idCard" align="center"
                                        label="身份证号码/护照号码"
                                        min-width="210">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeCode"-->
                                            <!--                                                      placeholder="请输入统一社会信用代码"></el-input>-->

                                            <el-form-item label-width="0" prop="idCard"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入身份证号码/护照号码',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.idCard, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type"
                                                          @input="value=>{row.idCard=value.replace(/[^\w_]/g, '');$forceUpdate()}"
                                                          v-model="row.idCard" clearable maxlength="18"
                                                          placeholder="请输入身份证号码/护照号码"></el-input>
                                                <span v-else>{{ row.idCard|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                        prop="vendeeAddress" align="center"
                                        label="通讯地址"
                                        min-width="210">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeeAddress"-->
                                            <!--                                                      placeholder="请输入通讯地址"></el-input>-->

                                            <el-form-item label-width="0" prop="vendeeAddress"
                                                          :rules="'edit' == type||'add' == type ? {
                                                             required: true,
                                                             message: '请输入通讯地址',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeeAddress, callback)
                                                           }:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="50"
                                                          v-model="row.vendeeAddress" clearable
                                                          placeholder="请输入通讯地址"></el-input>
                                                <span v-else>{{ row.vendeeAddress|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                        prop="vendeePhone" align="center"
                                        label="联系电话"
                                        min-width="150">
                                        <template v-slot="{row}">
                                            <!--                                            <el-input v-model="row.vendeePhone" placeholder="请输入联系电话"></el-input>-->
                                            <el-form-item label-width="0" prop="vendeePhone"
                                                          :rules="'edit' == type||'add' == type ? [{
                                                             required: true,
                                                             message: '请输入联系电话',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, row.vendeePhone, callback)
                                                           }, { pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '手机号码格式不正确', trigger: 'blur' }]:{}">
                                                <el-input v-if="'edit' == type||'add' == type" maxlength="12"
                                                          @input="value=>row.vendeePhone=value.replace(/[^\d]/g,'')"
                                                          v-model="row.vendeePhone" clearable
                                                          placeholder="请输入联系电话"></el-input>
                                                <span v-else>{{ row.vendeePhone|filterNull }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="操作" min-width="130"
                                                     align="center" fixed="right"
                                                     class-name="small-padding fixed-width">
                                        <template slot-scope="scope">
                                            <e-button size="mini" type="text" v-if="'edit' == type||'add' == type"
                                                      @click="handleDelete1(scope.row, scope.$index)"
                                                      v-hasPermi="['demo:demo:remove']">删除
                                            </e-button>
                                            <e-button size="mini" type="text"
                                                      @click="handleUpload1(scope.row, scope.$index)"
                                                      v-hasPermi="['demo:demo:upload']">{{ 'edit' == type||'add' == type?'上传附件':'查看附件' }}
                                            </e-button>
                                        </template>
                                    </el-table-column>
                                    <template v-if="'edit' == type||'add' == type" v-slot:append>
                                        <div class="flex-xy-center" style="height: 30px">
                                            <el-button type="text" icon="el-icon-plus" @click="add1">添加</el-button>
                                        </div>
                                    </template>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="备注:" prop="describeDetail">
                            <el-input v-if="'edit' == type||'add' == type" type="textarea"
                                      v-model="form.describeDetail" clearable maxlength="500"
                                      placeholder="请输入备注"></el-input>
                            <span v-else>{{ form.describeDetail|filterNull }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">返回</el-button>
            <el-button v-if="'edit' == type||'add' == type" :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </div>

        <!--    共用额度客户-->
        <el-dialog :title="'edit' == type||'add' == type?'上传附件':'查看附件'" :visible.sync="publicOpen" append-to-body width="45%">

            <span v-if="'detail' == type && (selObj.annexOss==undefined||selObj.annexOss==null||selObj.annexOss=='')">暂无数据</span>
            <ImageCommon v-else :disabled="'detail' == type" @input="imagechange"
             :up-type="2" info="选择附件" :limit="9" v-model="selObj.annexOss"></ImageCommon>

            <div slot="footer">
                <el-button type="primary" @click="publicOpen=false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    customerCorrelationVendee, addVendee, getCustomerList, customerUpdate, customerAdd
} from "@/api/memberManage/memberList";

export default {
    name:"BuyerDetail",
    components: {},
    dicts: [],
    data() {
        return {
            publicOpen: false,
            buttonLoading: false,
            form: {
                customerVendeeList: []
            },
            rules: {
            },
            type: null,
            publicForm: {},
            activeName: 'first',
            shareMemberList: [],
            dataList0: [],
            dataList1: [],
            selObj: {
                annexOss:''
            },
        };
    },
    watch:{
        '$route':{
            handler(val){
                console.log('this.$route', this.$route)

                if(val && val.name==this.$options.name){
                    if (this.$route.query && this.$route.query.correlationVendeeId && !this.$route.query.tabClick) {
                        this.form.correlationVendeeId = this.$route.query.correlationVendeeId

                        this.getOldData(this.$route.query.correlationVendeeId)
                    }
                    else if(!this.$route.query.tabClick){
                        this.form = {
                            customerVendeeList: []
                        }
                        this.shareMemberList = []
                        this.dataList0 = []
                        this.dataList1 = []
                    }
                    this.type = this.$route.query.type

                    const title =  this.$route?.query?.pageType??'买受人'
                    const route = Object.assign({}, this.$route, { title: `${title}` })
                    this.$store.dispatch('tagsView/updateVisitedView', route)
                    this.getMember()
                }
            },
            immediate:true,
            deep:true
        }
    },
    // created() {
    //     this.type = this.$route.query.type
    //
    //     if (this.$route.query && this.$route.query.correlationVendeeId) {
    //         this.form.correlationVendeeId = this.$route.query.correlationVendeeId
    //
    //         this.getOldData(this.$route.query.correlationVendeeId)
    //     }
    //     const title =  this.$route?.query?.pageType??'买受人'
    //     const route = Object.assign({}, this.$route, { title: `${title}` })
    //     this.$store.dispatch('tagsView/updateVisitedView', route)
    //     this.getMember()
    // },
    methods: {
        memberSel(val){
            let find = this.shareMemberList.find(item=>val==item.customerId);
            if(find){
                this.form.customerName = find.customerName
            }
        },
        add0() {
            this.dataList0.push({})
        },
        add1() {
            this.dataList1.push({})
        },
        getMember() {
            getCustomerList({
                pageNum: 1,
                pageSize: 1000000,
            }).then(res => {
                if (res.code == "200") {
                    this.shareMemberList = res.rows
                }
            });

        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        // 取消按钮
        publicCancel() {
            this.publicOpen = false;
            this.publicForm = {}
        },
        cancel() {
            this.$router.back();
this.$store.dispatch('tagsView/delView', this.$route);
        },
        getOldData(correlationVendeeId) {
            customerCorrelationVendee(correlationVendeeId).then(res => {
                this.form = res.data
                this.dataList0 = res.data.customerVendeeList.filter(item => 2 == item.customerTypeCode)
                this.dataList1 = res.data.customerVendeeList.filter(item => 1 == item.customerTypeCode)
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.commit()
                }
            });

            // Promise.all([
            //     this.$refs["form"].validate(),
            //     this.$refs["form0"].validate(),
            //     this.$refs["form1"].validate(),
            // ]).then(([valid,valid0,valid1]) => {
            //     if (valid&& valid0 && valid1) {
            //         this.commit()
            //     }
            // })

        },
        commit() {
            let that = this
            that.buttonLoading = true;

            that.dataList0 = that.dataList0.map(item => {
                item.customerTypeCode = 2
                return item
            })
            that.dataList1 = that.dataList1.map(item => {
                item.customerTypeCode = 1
                return item
            })

            that.form.customerVendeeList = that.dataList0.concat(that.dataList1)


            addVendee(that.form).then(res => {
                that.buttonLoading = false;
                that.$modal.msgSuccess("提交成功");
                that.$router.back()
            }).finally(e => {
                that.buttonLoading = false;
            })
        },

        /** 删除按钮操作 */
        handleDelete0(row, index) {
            this.dataList0.splice(index, 1)
        },
        handleUpload0(row, index) {
            this.publicOpen = true
            this.selObj = row
        },
        handleUpload1(row, index) {
            this.publicOpen = true
            this.selObj = row
        },
        /** 删除按钮操作 */
        handleDelete1(row, index) {
            this.dataList1.splice(index, 1)
        },
        imagechange(val){
            console.log('imagechange', val, this.selObj)
            if(this.selObj){
                if(2==this.selObj.customerTypeCode){
                    let find = this.dataList0.find(item=>this.selObj.vendeeId==item.vendeeId);
                    if(find){
                        find.annexOss = this.selObj.annexOss
                    }
                }else if (1==this.selObj.customerTypeCode){
                    let find2 = this.dataList1.find(item=>this.selObj.vendeeId==item.vendeeId);
                    if(find2){
                        find2.annexOss = this.selObj.annexOss
                    }
                }
            }
        }
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin: 15px 0;
    width: 100%;
}

.el-table--small .el-table__cell {
    padding: 1px 0 !important;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

</style>
